<!-- 聊天内容 -->
<template>
	<scroll-view class="list" scroll-y scroll-with-animation :scroll-into-view="scrollIntoViewId"
		@click="handleHideOthersPanel()">
		<view class="list-item" v-for="(item,index) in list" :key="index" :id="item.id">
			<text class="chat-datetime">{{item.datetime}}</text>
			<view class="chat-content">
				<view class="avatar" :class="{'isOwn': item.isOwn}">
					<image class="img" :src="item.avatar" mode="aspectFill"></image>
				</view>
				<view class="content" :class="{'isOwn': item.isOwn}">
					<text v-if="item.content" class="text">{{item.content}}</text>
					<image v-if="item.img" class="photo" :src="item.img" mode="widthFix"
						@click="handlePreviewImage(item.img)"></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import { ref, watch, nextTick } from 'vue';
	import { useChatStore } from "../store.js";

	const useChat = useChatStore();
	const list = ref([{
			id: 'id1',
			datetime: '08-27 14:22',
			isOwn: true,
			content: '亲，有红火蚁舒绝饵剂吗？',
			img: '',
			avatar: '/pagesC-message/static/images/will-delete/6.png'
		},
		{
			id: 'id2',
			datetime: '',
			isOwn: false,
			content: '舒绝杀蚁饵剂红火蚁一窝端诱饵',
			img: '',
			avatar: '/pagesC-message/static/images/will-delete/5.png'
		},
		{
			id: 'id3',
			datetime: '08-27 14:30',
			isOwn: true,
			content: '',
			img: 'https://img2.baidu.com/it/u=2404488985,3531156781&fm=253&fmt=auto&app=138&f=JPEG?w=299&h=451',
			avatar: '/pagesC-message/static/images/will-delete/6.png'
		},
	])

	// 预览图片
	const handlePreviewImage = (url) => {
		console.log(url)
		uni.previewImage({
			urls: [url],
			showmenu: true,
		});
	}

	// 滚动到哪个id
	const scrollIntoViewId = ref('');

	// 监听发送的内容
	watch(() => useChat.sendContent, (obj) => {
		if (!obj) return;
		const id = `id${list.value.length + 1}`;
		list.value.push({
			id,
			datetime: new Date().toLocaleString(),
			isOwn: true,
			content: obj.type === 'text' ? obj.content : '',
			img: obj.type === 'image' ? obj.content : '',
			avatar: '/pagesC-message/static/images/will-delete/6.png',
		});

		nextTick(() => {
			scrollIntoViewId.value = id;
		})
	});

	// 监听其它类型选择面板展开时
	watch(() => useChat.isShowOthersPanel, (value) => {
		if (!value) return;
		scrollIntoViewId.value = '';

		nextTick(() => {
			setTimeout(() => {
				scrollIntoViewId.value = list.value[list.value.length - 1].id;
			}, 100);
		})
	});

	// 隐藏其它类型选择面板
	const handleHideOthersPanel = () => {
		useChat.SET_HIDE_OTHERS_PANEL();
	}
</script>

<style lang="scss" scoped>
	.list {
		height: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;

		&-item {
			margin-top: 40rpx;
			padding-bottom: 30rpx;

			.chat-datetime {
				display: block;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				text-align: center;
				line-height: 1.5;
			}

			.chat-content {
				position: relative;
				min-height: 86rpx;
				padding: 0 102rpx;
				margin-top: 32rpx;

				.avatar {
					position: absolute;
					top: 0;
					left: 0;
					width: 86rpx;
					height: 86rpx;

					&.isOwn {
						left: auto;
						right: 0;
					}

					.img {
						display: block;
						width: inherit;
						height: inherit;
						border-radius: 50%;
					}
				}

				.content {
					display: flex;

					.text {
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
						line-height: 1.5;
						padding: 20rpx 24rpx;
						background: #F2F2F4;
						border-radius: 16rpx;
						word-break: break-all;
					}

					.photo {
						width: 300rpx;
						height: 300px;
						border-radius: 6rpx;
					}

					&.isOwn {
						justify-content: flex-end;

						.text {
							background: #FFD6D6;
						}
					}
				}
			}
		}
	}
</style>